<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jquery.cme-regDialog</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css" />
    <link rel="stylesheet" href="../lib/gritter/css/jquery.gritter.css" />
    <link rel="stylesheet" href="../dist/css/cme-refDialog.css" />
</head>

<body>
    <div class="container">
        <div class="row">
            用法1：
            <input type="button" id="openGoodsRefDialog" value="选取商品" />
        </div>
        <div class="row">
            <p id="refDialogShow"></p>
        </div>
        <div class="row">
            <input type="text" id="refDialogValue" />
        </div>
        <div class="row">
            用法1-2：初始化设置data
            <input type="button" id="openGoodsRefDialog2" value="选取商品" />
        </div>
        <div class="row">
            <p id="refDialogShow2"></p>
        </div>
        <h3>用法2：</h3>
        <form class="form-horizontal">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">选中商品</label>
            <div class="col-sm-10">
              <input type="hidden" class="form-control goodsIds" placeholder="商品">
            </div>
          </div>
          
        </form>
        <h3>单选用法：</h3>
        <form class="form-horizontal">
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">选中商品</label>
            <div class="col-sm-10">
              <input type="hidden" class="form-control goodsIds2" placeholder="商品">
            </div>
          </div>
          
        </form>
        
        
    </div>
    <script src="../bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
    <script src="../bower_components/mockjs/dist/mock.js"></script>
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="../lib/layer/layer.js"></script>
    <script src="../lib/artTemplate/template-web.js"></script>
    <script src="../lib/artTemplate/artTemplate.config.js"></script>
    <script src="../lib/artTemplate/artTemplate.pager.js"></script>
    <script src="../lib/bootstrap.jDialog.js"></script>
    <script src="../dist/js/jquery.cme-refDialog.js"></script>
    <script type="text/javascript">
    var refDialog;
    $(function() {
        Mock.mock('http://goods.com/api/listData.jhtml?pageSize=5&pageNum=1', {
            "code": 'success',
            "data": {
                "data": [{

                        "id": 1,
                        "goodsName": "测试商品111",
                        "price": '10.92'
                    },
                    {
                        "id": 2,
                        "goodsName": "测试商品222",
                        "price": '20.92'
                    },
                    {
                        "id": 3,
                        "goodsName": "测试商品333",
                        "price": '30.92'
                    },
                    {
                        "id": 4,
                        "goodsName": "测试商品444",
                        "price": '40.92'
                    },
                    {
                        "id": 5,
                        "goodsName": "测试商品555",
                        "price": '50.92'
                    }

                ],
                "draw": 0,
                "error": "",
                "recordsFiltered": 10,
                "recordsTotal": 10
            },
            "msg": "success"
        });
        Mock.mock('http://goods.com/api/listData.jhtml?pageSize=5&pageNum=2', {
            "code": 'success',
            "data": {
                "data": [{

                        "id": 6,
                        "goodsName": "测试商品666",
                        "price": '10.92'
                    },
                    {
                        "id": 7,
                        "goodsName": "测试商品777",
                        "price": '20.92'
                    },
                    {
                        "id": 8,
                        "goodsName": "测试商品888",
                        "price": '30.92'
                    },
                    {
                        "id": 9,
                        "goodsName": "测试商品999",
                        "price": '40.92'
                    },
                    {
                        "id": 10,
                        "goodsName": "测试商品000",
                        "price": '50.92'
                    }

                ],
                "draw": 0,
                "error": "",
                "recordsFiltered": 10,
                "recordsTotal": 10
            },
            "msg": "success"
        });

        Mock.mock('http://goods.com/api/listData.jhtml?pageSize=5&searchValue=666&pageNum=1', {
            "code": 'success',
            "data": {
                "data": [{

                        "id": 6,
                        "goodsName": "测试商品666",
                        "price": '10.92'
                    },
                    {
                        "id": 16,
                        "goodsName": "测试商品1666",
                        "price": '20.92'
                    }


                ],
                "draw": 0,
                "error": "",
                "recordsFiltered": 10,
                "recordsTotal": 10
            },
            "msg": "success"
        });
        Mock.mock('http://goods.com/api/detailData.jhtml?id=1%2C2', {
            "code": 'success',
            "data": {
                "data": [{

                        "id": 1,
                        "goodsName": "测试商品111",
                        "price": '10.92'
                    },
                    {
                        "id": 2,
                        "goodsName": "测试商品222",
                        "price": '20.92'
                    }


                ],
                "draw": 0,
                "error": "",
                "recordsFiltered": 120,
                "recordsTotal": 120
            },
            "msg": "success"
        });
        Mock.mock('http://goods.com/api/detailData.jhtml?id=1%2C2%2C3', {
            "code": 'success',
            "data": {
                "data": [{

                        "id": 1,
                        "goodsName": "测试商品111",
                        "price": '10.92'
                    },
                    {
                        "id": 2,
                        "goodsName": "测试商品222",
                        "price": '20.92'
                    },
                    {
                        "id": 3,
                        "goodsName": "测试商品333",
                        "price": '30.92'
                    }


                ],
                "draw": 0,
                "error": "",
                "recordsFiltered": 120,
                "recordsTotal": 120
            },
            "msg": "success"
        });
        Mock.mock('http://goods.com/api/detailData.jhtml?id=1', {
            "code": 'success',
            "data": {
                "data": [{

                        "id": 1,
                        "goodsName": "测试商品111",
                        "price": '10.92'
                    }


                ],
                "draw": 0,
                "error": "",
                "recordsFiltered": 120,
                "recordsTotal": 120
            },
            "msg": "success"
        });

        refDialog = $.refDialog({
            id: 'goodsRefDialog',
            title: '选取商品',
            url: 'http://goods.com/api/listData.jhtml',
            detailUrl: 'http://goods.com/api/detailData.jhtml',
            elShow: $('#refDialogShow'),
            elValue: $('#refDialogValue'),
            keyField: 'id',
            textField: 'goodsName',
            table: {
                columns: [
                    { field: 'id', text: 'ID' },
                    { field: 'goodsName', text: '商品名称' },
                    { field: 'price', text: '价格' }
                ]
            }

        });

        $("#openGoodsRefDialog").on("click", function() {


            refDialog.show();

        });
        refDialog2 = $.refDialog({
            id: 'goodsRefDialog',
            title: '选取商品',
            url: 'http://goods.com/api/listData.jhtml',
            detailUrl: 'http://goods.com/api/detailData.jhtml',
            data : '1,2',
            keyField: 'id',
            textField: 'goodsName',
            table: {
                columns: [
                    { field: 'id', text: 'ID' },
                    { field: 'goodsName', text: '商品名称' },
                    { field: 'price', text: '价格' }
                ]
            }

        });

        $("#openGoodsRefDialog2").on("click", function() {


            refDialog2.show();

        });
        $('.goodsIds').val('1,2');
        $('.goodsIds').refDialog({
            title: '选取商品',
            url: 'http://goods.com/api/listData.jhtml',
            detailUrl: 'http://goods.com/api/detailData.jhtml',
            keyField: 'id',
            textField: 'goodsName',
            table: {
                columns: [
                    { field: 'id', text: 'ID' },
                    { field: 'goodsName', text: '商品名称' },
                    { field: 'price', text: '价格' }
                ]
            }

        })
        $('.goodsIds2').refDialog({
            title: '选取商品',
            url: 'http://goods.com/api/listData.jhtml',
            detailUrl: 'http://goods.com/api/detailData.jhtml',
            keyField: 'id',
            type:'single',
            textField: 'goodsName',
            table: {
                columns: [
                    { field: 'id', text: 'ID' },
                    { field: 'goodsName', text: '商品名称' },
                    { field: 'price', text: '价格' }
                ]
            }

        })
    });
    </script>
</body>

</html>